<template>
	<view class="content" :style="{PaddingTop: statusBar + 54 + 'px'}">
		<u-navbar :is-back="true" back-icon-color="#fff" :background="background" :border-bottom="false"
			:immersive="true"></u-navbar>
		<!-- 首页背景 -->
		<image src="../../static/images/index_bg_01.png" class="bg"></image>
		<!-- 图标 -->
		<image src="../../static/icons/index_1.png" mode="" class="index_1"></image>

		<view class="tit">
			新房通管理平台
		</view>
		<view class="ftit">
			一键管理查询新房通APP信息
		</view>

		<view class="menu_box u-flex u-flex-wrap">
			<view class="menu" @click="toPage('../data-stat/data-stat')">
				<image src="../../static/icons/index_2.png" mode="" class="icon"></image>
				<view class="menu_tit">
					数据统计
				</view>
			</view>
			<view class="menu" @click="toPage('../auditManagement/auditManagement')">
				<image src="../../static/icons/index_3.png" mode="" class="icon"></image>
				<view class="menu_tit">
					审核管理
				</view>
			</view>
			<view class="menu" @click="toPage('../mechanismManage/mechanismManage')">
				<image src="../../static/icons/index_4.png" mode="" class="icon"></image>
				<view class="menu_tit">
					机构管理
				</view>
			</view>
			<view class="menu" @click="toPage('../wageManagement/wageManagement')">
				<image src="../../static/icons/index_5.png" mode="" class="icon"></image>
				<view class="menu_tit">
					工资管理
				</view>
			</view>
			<view class="menu" @click="toPage('../hit-card/hit-card')">
				<image src="../../static/icons/index_6.png" mode="" class="icon"></image>
				<view class="menu_tit">
					考勤打卡
				</view>
			</view>
			<view class="menu" @click="toPage('../question/question')">
				<image src="../../static/icons/index_7.png" mode="" class="icon"></image>
				<view class="menu_tit">
					调查问卷
				</view>
			</view>
			<view class="menu" @click="toPage('../storeManage/storeManage')">
				<image src="../../static/icons/index_8.png" mode="" class="icon"></image>
				<view class="menu_tit">
					门店管理
				</view>
			</view>
			<view class="menu" @click="toPage('../notice/notice')">
				<image src="../../static/icons/index_9.png" mode="" class="icon"></image>
				<view class="menu_tit">
					公告管理
				</view>
			</view>
			
			<view class="menu" @click="toPage('/staff/pages/sign/list')">
				<image src="../../static/icons/index_5.png" mode="" class="icon"></image>
				<view class="menu_tit">
					签到信息
				</view>
			</view>
		</view>

		<view class="manage_box u-flex">
			<view class="u-flex-1" @click="toPage('../person/person')">
				<image src="../../static/icons/index_10.png" mode="" class="m_icon"></image>
				<view class="m_tit">
					人员管理
				</view>
				<view class="btn">
					立即管理
				</view>
			</view>
			<!-- 间隔线 -->
			<view class="line"></view>
			<view class="u-flex-1" @click="$gTo('/pages/index/floor-list?type=7')">
				<image src="../../static/icons/index_11.png" mode="" class="m_icon"></image>
				<view class="m_tit">
					楼盘管理
				</view>
				<view class="btn">
					立即管理
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: 0,
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
			};
		},
		onLoad(option) {
			let _this = this;
			//状态栏高度
			uni.getSystemInfo({
				success: function(res) {
					_this.statusBar = res.statusBarHeight;
				}
			});
		},
		methods: {
			toPage(url) {
				this.$gTo(url)
			},

			onPageScroll: function(e) {
				//nvue暂不支持滚动监听，可用bindingx代替
				// console.log("滚动距离为：" + e.scrollTop);
				let a = e.scrollTop * 0.05;
				if (a > 1) {
					a = 1;
				}
				if (e.scrollTop == 0) {
					this.background.backgroundColor = 'rgba(49,153,245,0)';
				} else {
					this.background.backgroundColor = 'rgba(49,153,245,' + a + ')';
				}
			},
		}
	};
</script>
<style>
	page {
		background-color: #f2f3f5 !important;
	}
</style>
<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 36rpx;
	}

	.bg {
		width: 750rpx;
		height: 780rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.index_1 {
		width: 90rpx;
		height: 100rpx;
		margin: 0 auto 30rpx;
	}

	.tit {
		font-size: 74rpx;
		line-height: 76rpx;
		color: #0a2135;
		text-align: center;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.ftit {
		font-size: 26rpx;
		height: 28rpx;
		color: #384753;
	}

	.menu_box {
		width: 100%;
		padding: 58rpx 0 20rpx;
	}

	.menu {
		width: fit-content;
		margin-right: 46rpx;
		margin-bottom: 36rpx;
	}

	.menu:nth-child(4n) {
		margin-right: 0;
	}

	.icon {
		display: block;
		width: 132rpx;
		height: 86rpx;
		margin-bottom: 18rpx;
	}

	.menu_tit {
		font-size: 26rpx;
		font-weight: bold;
		line-height: 28rpx;
		color: #030303;
		text-align: center;
	}

	.manage_box {
		width: 100%;
		border-radius: 18rpx;
		padding: 70rpx 0 30rpx;
		box-shadow: 0 0 2rpx #e3e3e3;
		background: linear-gradient(to bottom, #fff, transparent);
	}

	.line {
		width: 2rpx;
		height: 150rpx;
		background-color: #e3e4e5;
	}

	.m_icon {
		display: block;
		width: 79rpx;
		height: 70rpx;
		margin: 0 auto 30rpx;
	}

	.m_tit {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 30px;
		color: #030303;
		text-align: center;
		margin-bottom: 12rpx;
	}

	.btn {
		width: 120rpx;
		height: 44rpx;
		font-size: 22rpx;
		line-height: 44rpx;
		color: #fff;
		text-align: center;
		border-radius: 22rpx;
		background-color: #00a1e9;
		margin: 0 auto;
	}
</style>